import {PropType, reactive, toRefs, ref, defineComponent, watch, computed, onMounted} from 'vue'
import {PMContent, PMLayout, PMNav} from '../layout'
import Jichuxinxi from './baseInfo'
import Kaopinliucheng from './evaluationProcess'
import Mobanzhibiao from './templateIndicators'
import EvaluationSteps from './steps'

export type EvaluationData = Evaluation.EvalutaionData | Evaluation.AddEvalutaionData

const Evaluation = defineComponent({
  props: {
    evalutaion: {
      type: Object as PropType<EvaluationData>,
      default: {
        partakeCount: -1,
        pmGroupId: -1,
        createTime: '',
        /**考核表名称 */
        pmGroupName: '',
        /**周期类型code */
        pmPeriodCode: '0025',
        /**考核组备注 */
        pmGroupDesc: '',
        /**周期类型名称 */
        pmPeriodName: '月度',
        /**考核组人员列表 */
        pmGroupUserList: [],
        /**考核组部门列表 */
        pmGroupDeptList: [],
        /**考核组绩效列表 */
        pmGroupDimensionList: [],
        /**考核组流程列表 */
        pmGroupProgressList: []
      }
    },
    title: {
      type: String,
      default: ''
    },
    loading: Boolean,
    showAppointScore: {
      type: Boolean,
      default: true
    }
  },
  emits: {
    'update:evalutaion': (data: EvaluationData): boolean => true,
    confirm: (): boolean => true
  },
  setup(props, {emit}) {
    let state = reactive<{
      evalutaion: EvaluationData
      actived: number
    }>({
      evalutaion: {
        appointScoreSwitch: 0,
        partakeCount: -1,
        pmGroupId: -1,
        createTime: '',
        /**考核表名称 */
        pmGroupName: '',
        /**周期类型code */
        pmPeriodCode: '0025',
        /**考核组备注 */
        pmGroupDesc: '',
        /**周期类型名称 */
        pmPeriodName: '月度',
        /**考核组人员列表 */
        pmGroupUserList: [],
        /**考核组部门列表 */
        pmGroupDeptList: [],
        /**考核组绩效列表 */
        pmGroupDimensionList: [],
        /**考核组流程列表 */
        pmGroupProgressList: [],
        pmGroupExcUserList: []
      },
      actived: 1
    })

    /**监听步骤变化 */
    watch(
      () => state.actived,
      n => {
        console.log('Evaluation watch state.actived', n)
      }
    )

    /**监听传入值 */
    watch(
      () => props.evalutaion,
      n => {
        console.log('考核组 监听传入值 (props.evalutaion)', n)
        if (n) {
          state.evalutaion = n
        } else {
          state.evalutaion = {
            appointScoreSwitch: 0,
            partakeCount: -1,
            pmGroupId: -1,
            createTime: '',
            /**考核表名称 */
            pmGroupName: '',
            /**周期类型code */
            pmPeriodCode: '0025',
            /**考核组备注 */
            pmGroupDesc: '',
            /**周期类型名称 */
            pmPeriodName: '月度',
            /**考核组人员列表 */
            pmGroupUserList: [],
            /**考核组部门列表 */
            pmGroupDeptList: [],
            /**考核组绩效列表 */
            pmGroupDimensionList: [],
            /**考核组流程列表 */
            pmGroupProgressList: [],
            pmGroupExcUserList: []
          }
        }
      },
      {immediate: true}
    )

    /**监听考核表内容变化 state.evalutaion */
    watch(
      () => state.evalutaion,
      n => {
        console.log('Evalutaion 考核组内容变化', n)
        emit('update:evalutaion', n)
      },
      {deep: true}
    )

    return () => (
      <PMLayout spinning={props.loading}>
        <PMNav
          title={props.title}
          v-slots={{
            navRight: () => (
              <div class='h-full flex items-center gap-x-12'>
                {/* <a-button>预览</a-button> */}
                <a-button
                  class=' bg-primary text-white'
                  type='primary'
                  onClick={() => {
                    console.log('w1考评组维度指标变化保存', state.evalutaion)

                    emit('confirm')
                  }}
                >
                  保存
                </a-button>
              </div>
            )
          }}
        >
          <EvaluationSteps v-model={[state.actived, 'actived']}></EvaluationSteps>
        </PMNav>
        <PMContent>
          {state.actived === 1 ? (
            <Jichuxinxi
              v-models={[
                [state.evalutaion.pmGroupName, 'pmGroupName'],
                [state.evalutaion.pmPeriodCode, 'pmPeriodCode'],
                [state.evalutaion.pmPeriodName, 'pmPeriodName'],
                [state.evalutaion.pmGroupUserList, 'pmGroupUserList'],
                [state.evalutaion.pmGroupDeptList, 'pmGroupDeptList'],
                [state.evalutaion.appointScoreSwitch, 'appointScoreSwitch'],
                [state.evalutaion.pmGroupExcUserList, 'pmGroupExcUserList']
              ]}
            ></Jichuxinxi>
          ) : state.actived === 2 ? (
            <Mobanzhibiao
              v-model={[state.evalutaion.pmGroupDimensionList, 'pmGroupDimensionList']}
              showAppointScore={props.showAppointScore}
            ></Mobanzhibiao>
          ) : state.actived === 3 ? (
            <Kaopinliucheng
              v-model={[state.evalutaion.pmGroupProgressList, 'pmGroupProgressList']}
            ></Kaopinliucheng>
          ) : (
            <></>
          )}
        </PMContent>
      </PMLayout>
    )
  }
})
export default Evaluation
